<template>
  <div id="member">
    <nav>
      <el-input placeholder="请输入昵称或手机号" style="width:200px;margin-right: 10px" v-model="keyword"></el-input>
      <el-select v-model="user_equity" clearable placeholder="用户权益">
        <el-option
          v-for="item in equityList"
          :key="item.value"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="getUserList" style="margin:0 20px">检索</el-button>
      <el-col class="action-bar screen">
        <el-checkbox label="职位" name="position" v-model="showColumns.position"></el-checkbox>
        <!-- <el-checkbox label="活动方类型" name="type" v-model="showColumns.type"></el-checkbox> -->
        <el-checkbox label="邮箱" name="email" v-model="showColumns.email"></el-checkbox>
        <el-checkbox label="公司名称" name="company" v-model="showColumns.company"></el-checkbox>
        <el-checkbox label="公司地址" name="address" v-model="showColumns.address"></el-checkbox>
        <el-checkbox label="注册时间" name="created_at" v-model="showColumns.created_at"></el-checkbox>
      </el-col>
    </nav>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="头像"
        width="100">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.user_info.photo_url" alt=""
                 style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名/昵称"
        width="180">
        <template slot-scope="scope">
          <div>{{scope.row.user_info.realname?scope.row.user_info.realname:scope.row.user_info.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        width="180"
        label="手机">
        <template slot-scope="scope">
          <div>{{scope.row.phone?scope.row.phone:scope.row.user_info.phone_number}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="type_name"
        width="180"
        label="用户来源">
      </el-table-column>
      <el-table-column
        prop="position"
        label="职位"
        v-if="showColumns.position"
      >
        <template slot-scope="scope">
          <div>{{scope.row.user_info.position}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        v-if="showColumns.email"
      >
        <template slot-scope="scope">
          <div>
            <div>{{scope.row.user_info.email}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="company"
        label="公司名称"
        v-if="showColumns.company"
      >
        <template slot-scope="scope">
          <div>
            <div>{{scope.row.user_info.company}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="公司地址"
        min-width="200"
        v-if="showColumns.address"
      >
        <template slot-scope="scope">
          <div>
            <div>
              {{scope.row.user_info.company_province}}{{scope.row.user_info.company_city}}{{scope.row.user_info.company_area}}{{scope.row.user_info.company_address}}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        width="180"
        label="注册时间"
        v-if="showColumns.created_at"
      >
      </el-table-column>
      <el-table-column
        prop="vip_rule_list"
        width="180"
        label="用户权益"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.vip_rule_list.length==0">普通用户</span>
          <span v-for="(item,index) in scope.row.vip_rule_list" :key="index">{{item}}<span v-if="(index+1)!=scope.row.vip_rule_list.length">&</span></span>
        </template>
      </el-table-column>
      <el-table-column
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="addExchangeRecords(scope.row.id,scope.row.user_info.integral)">新建兑换记录</el-button>
          <el-button type="primary" size="mini" @click="toSetMeal(scope.row.id)">设置套餐</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>

    <!--新建兑换记录弹窗-->
    <el-dialog title="新建兑换记录" :visible.sync="addRecordVisible" @close="initAddform" width="40%" >
      <el-form label-width="150px" label-position="left">
        <el-form-item label="该用户当前总积分">
          <div>{{nowRecordNumber}}</div>
        </el-form-item>
        <el-form-item label="兑换积分">
          <el-input type="number" placeholder="输入数字不能大于现有积分" min="0" :max="nowRecordNumber" v-model="recordNumber"  auto-complete="off" style="width:300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="setIntegralExchangeRecord" >提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        addRecordVisible: false, //新建兑换弹窗
        // menuBandVisible: false,
        nowRecordNumber: 0,
        recordNumber: '',
        tableData: [],
        page: 1,
        totalPage: 0,
        keyword: '',
        user_id: '',
        user_equity:'',
        equityList: [],
        showColumns: {
          position: false,
          email: false,
          company: false,
          address: false,
          created_at: true
        },
      }
    },
    methods: {
      //获取权益列表
      async getUserVipList() {
        let res = await this.$api.getUserVipList({user_token: window.localStorage.getItem('user_token')});
        if (res.data.level == 'success') {
          this.equityList = res.data.data;
        }
      },
      async getUserList() {
        //获取会员列表
        let params = {
          page: this.page,
          limit: 16,
          keyword: this.keyword,
          user_token: window.localStorage.getItem('user_token'),
          vip_rule: this.user_equity
        }
        let res = await this.$api.getUserList(params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total
        }
      },
      //新建兑换记录
      addExchangeRecords(id,num){
        this.user_id = id;
        this.nowRecordNumber = num;
        this.addRecordVisible = true;
      },
      async setIntegralExchangeRecord(){
        let params = {
          user_id: this.user_id,
          integral: this.recordNumber
        }
        const res = await this.$api.setIntegralExchangeRecord(params);
        if (res.data.level == 'success'){
          this.$message({
            type: 'success',
            message: res.data.message
          });
          this.addRecordVisible = false;
          this.getUserList();
        } else {
          this.$message({
            type: 'warning',
            message: res.data.message
          });

        }
      },
      toSetMeal(id) {
        //显示绑定弹窗
        this.$router.push({name:'user_meal',query: {id: id}})
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getUserList();
      },
      initAddform(){
        this.recordNumber = 0;
      },
      closeDialog(){
        this.recordNumber = 0;
        this.addRecordVisible = false;
      },
    },
    mounted() {
      this.getUserList()
      this.getUserVipList();
    },
  }
</script>
<style lang="scss" scoped>
  .action-bar {
    height: 60px;
    margin: 20px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }
  }
  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }
  .dialog-footer {
    text-align: center;
  }
  nav {
    background: #eee;
    padding: 20px;
    // position: fixed;
    width: 100%;
    z-index: 99;
  }
</style>
